import { FC, memo, useEffect, useState } from 'react'
import { Button, Modal } from 'antd'

const LoadCom = memo((props: { id: any }) => {
  const { id } = props
  console.log('[ LoadCom id ] >', id)
  const [name, setname] = useState('')

  useEffect(() => {
    setname(`new id ${id}`)
  }, [id])

  return <p>{name}</p>
})

const MainDemo: FC = () => {
  const [id, setid] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(false)

  return (
    <>
      <Modal
        title="样例数据"
        open={isModalOpen}
        footer={null}
        onCancel={() => {
          setid('')
          Promise.resolve().then(() => {
            setIsModalOpen(false)
          })
        }}>
        <LoadCom id={id} />
      </Modal>

      <Button
        type="primary"
        onClick={() => {
          setid('new id')
          setIsModalOpen(true)
        }}>
        update id
      </Button>
    </>
  )
}

export default MainDemo
